
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Album example · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">



    <!-- Bootstrap core CSS -->
<!-- <link href="../static/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
<link href="../static/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


  </head>
  <body>

<header>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <img src="../static/image/zzx.png" alt="logo" width="60" height="60" >
        <!-- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> -->
        <strong style="font-size:25px; padding-left:20px;">词频统计</strong>

      </a>
      <a href="http://127.0.0.1:5000/">
      </a>

    </div>
  </div>
</header>

<main>

   <section class="db"  >
    <h2 class="fw-light"><h2 style="font-weight: bolder;">元音词频统计</h2></h2>
    <h3 class="fw-light"><br>您可输入元音和单词后，点击按钮，程序通过运算可统计并输出单词中元音字母的词频。</h3>
    <h4 class="fw-light">（点击右上角图标可返回主页面）</h4>
   </section>


  <div class="container py-2">
    <header class="mb-4 border-bottom">

    </header>
    <div class="modal-dialog" role="document">
      <div class="modal-content rounded-6 shadow">
         <div class="bd-example">
        <figure class="text-center">
            <h1>元音查询</h1>
        </figure>
    </div>

    <form method="post" action="/result_word">

    <div style="width:100%;text-align:center">
        <div class="col-lg-6 col-md-8 mx-auto">
                  <label for="vowels" class="form-label" style="" >元音字母</label>
                  <input type="text" class="form-control" name="vowels" placeholder="请输入要查询的元音字母">
                  <div class="invalid-feedback">
                    Vowels is required.
                  </div>
        </div>

    <br>
        <div class="col-lg-6 col-md-8 mx-auto">
                  <label for="word" class="form-label">单词</label>
                   <input type="text" class="form-control" name="word" placeholder="请输入要查询的单词">
              <div class="invalid-feedback">
                    Word is required.
              </div>
        </div>
    </div>



        <br>
    <div style="width:100%;text-align:center">
        <div class="col-lg-6 col-md-8 mx-auto" >
            <a href="result_word.html"><button type="submit" class="tijiao" _msthash="1630226" _msttexthash="76999">提交</button></a>
        </div>
    </div>

    </form>
</div>
      </div>
    </div>
</main>

<footer class="text-muted py-2">
  <div class="container">
    <p class="float-end mb-2">
      <a href="hello">Back</a>
    </p>
    </div>
</footer>


  </body>
</html>
<style>
body {
background-image: linear-gradient( #636363,#a2ab58);
  animation: bg-color 10s infinite;

  -webkit-animation: bg-color 10s infinite;

}
a{

text-decoration:none;
color:#333;
}
@keyframes bg-color {

    0% {
        background-image: linear-gradient(to right, #7F7FD5, #86A8E7, #91EAE4)
    }

    100% {
        background-image: linear-gradient(to right, #91EAE4, #6be585)
    }
}
.db {
    text-align: center;
}
.mb-4{
    text-align: center;
}
.col-md-6{
    margin-right: auto;
    margin-left: auto;
    position: center;
    width: 800px ;
    text-align: center;
}
.tijiao{
    margin-bottom: 20px;
    background-color:yellow;
}
</style>